<template>
  <div id="book-mainBox" class="clearfix" style="margin-top: 10px;" ref="bookBox">

    <div class="book-box box-clone clearfix" style="opacity:1">
      <div class="book-pic clearfix" style="width: 190px;">

        <a href=""><div style="cursor: pointer"  class="book-newPost">发新帖</div></a>

        <div class="book-category clearfix">
          <div>分类:</div>
          <a href=""><div class="book-category-icon category-tab active ">全部</div></a>
          <a href=""><div class="book-category-icon category-tab ">动漫画集</div></a>
          <a href=""><div class="book-category-icon category-tab ">杂志画集</div></a>
          <a href=""><div class="book-category-icon category-tab ">网站推荐</div></a>
          <a href=""><div class="book-category-icon category-tab ">游戏CG</div></a>
          <a href=""><div class="book-category-icon category-tab ">个人杂图</div></a>
        </div>
        <div class="book-category clearfix" style="height: 30px;">
          <div>筛选:</div>
          <div class="book-category-icon active">全部</div>
          <div class="book-category-icon">人气</div>
        </div>

        <div class="book-category clearfix" style="height: 110px;">
          <div>排序:</div>
          <a href=""><div class="book-category-icon active ">按发表时间</div></a>

          <div class="book-category-icon">按回复时间</div>
          <a href=""><div class="book-category-icon ">按查看次数</div></a>

          <div class="book-category-icon">按回复次数</div>
          <div class="book-category-icon">随机</div>
        </div>
      </div>
    </div>

    <waterfullItem :bookListData="bookList.data"></waterfullItem>

    <!--<div class="book-box" v-for="item in bookList.data">-->
      <!--<div class="book-pic">-->
        <!--<router-link :to="{path: '/book/detail/'+55}"><img :src="item.image" alt="">-->
          <!--<div class="book-title">{{ item.title}}</div></router-link>-->
        <!--<div class="book-icon clearfix">-->
          <!--<div class="icon-eye-open">sss</div>-->
          <!--<div class="icon-comments-alt">评论：55555</div>-->
        <!--</div>-->
        <!--<div class="book-username">-->
          <!--<a href=""><img :src="item.image" alt=""></a>-->
          <!--<div >sss</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

  </div>
</template>

<script>
  import waterfullItem from '../../components/book/waterfullItem'
  import Mock from 'mockjs';
  const ERROR = 0;
    export default {
      data() {
        return {
          bookList: {}
        }
      },
      created() {
        window.addEventListener('scroll', this.waterfull);
        this.$http.get('http://rapapi.org/mockjs/17725/api/book?accessToken=sss').then((response) => {
          response = response.body;
          if (Mock.mock(response).errno === ERROR) {
            this.bookList = Mock.mock(response);
            console.log(this.bookList)
          }

        });
      },
      mounted(){
        var _this = this;
        this.$nextTick(() => {
            _this.waterfull();
        });
      },
      methods: {
          waterfull: function(){
            const main = $('#book-mainBox');
            const $boxs = $('#book-mainBox .book-box');
            const w = $boxs.eq(1).outerWidth();
            const cols = Math.floor(main.width()/w);
            const hArr = [];
            $boxs.each(function(index,value){
              var h = $boxs.eq(index).outerHeight();
              if (index < cols){
                hArr[index] = h;
                $(value).animate({
                  opacity:1,
                },600)
              }else{
                const minH = Math.min.apply(null,hArr);
                const minHIndex = $.inArray(minH,hArr);
                $(value).css({
                  position:'absolute',
                }).animate({
                  top:minH,
                  left:minHIndex*w,
                  opacity:1,
                },600);
                hArr[minHIndex]+=$boxs.eq(index).outerHeight();

              }
            });
          }
      },
      components: {
        waterfullItem
      },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  #book-mainBox{
    width:1152px;
    position: relative;
    margin: 0 auto;
    border: 4px solid #f2f2f2;
    z-index:1;
    min-height: 500px;
    padding-bottom: 20px;

  }
  .page_list{
    margin-top: -37px;
    float: right;
    position: relative;
    z-index: 2;
  }
  .end{
    float: left;
    position: relative;
    left:50%
  }
  .page_list li{
    float: left;
    width: 35px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 0.5px solid #ddd;
    color:gray;
    cursor: pointer;
  }

  .page_list li.active{
    background-color:#E5EDF2 ;
  }
  #book-mainBox .book-box{
    padding: 15px 0 0 15px;
    float: left;
  }
  #book-mainBox .book-category{
    width: 190px;
    margin-top: 10px;
  }
  #book-mainBox .book-category div{
    float: left;
    margin: 0 8px 10px 0;
  }
  #book-mainBox .book-category .book-category-icon{
    width: auto;
    height: 28px;
    border: 1px solid #BFBFBF;
    line-height: 28px;
    padding: 0 10px 0 10px;
    border-radius: 5px;
    box-shadow:  0 0 1px #908e8e;
    color:#2BA7E7;
    cursor: pointer;
    transition:background-color 0.5s;
    font-size: 12px;
  }
  #book-mainBox .book-category .book-category-icon:hover{
    background-color:#87BE25;
    color: white;
  }
  #book-mainBox .book-pic .book-newPost{
    width: 152px;
    height: 32px;
    background-color:#F6697A;
    color:white;
    text-align: center;
    line-height: 32px;
    margin: 0 auto;
    border-radius: 5px;
  ;
  }
  #book-mainBox .book-pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow:0 0  5px #ccc;
  }
  #book-mainBox .book-pic img{
    width: 190px;
    height: auto;
  }

  #book-mainBox .book-pic .book-title{
    width: 190px;
    color: #2BA7E7;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  #book-mainBox .book-pic .book-content{
    width: 190px;
  }
  #book-mainBox .book-pic .book-icon{
    width: 190px;
    font-size: 14px;
    color: #87BE25;;
    div{
      float: left;
    }
  }

  #book-mainBox .book-box .book-username{
    width: 190px;
    height: 40px;
    margin-top: 10px;
    background-color: #f0f0f0;
  }
  #book-mainBox .book-box .book-username img{
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 5px;
  }
  #book-mainBox .book-box .book-username div{
    color: #87BE25;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
  #book-mainBox .book-pic .active{
    background-color:#87BE25;
    color:white
  }
</style>
